<template>
  <div v-loading="loading">
    <el-dialog :visible.sync="visible" :title="type == 'create' ? '添加推荐' : '修改推荐'" width="1000px">
      <el-form :model="form">
        <el-form-item label="类型">
          <template>
            <el-radio v-model="form.type" label="hot">正在热播</el-radio>
            <el-radio v-model="form.type" label="latest">最新推荐</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="分类">
          <el-select placeholder="选择分类" v-model="form.type" @change="selectClass">
            <el-option :key="item.value" :label="item.name" :value="item.id" v-for="item in worksClassList"></el-option>
          </el-select>

          <el-input clearable placeholder="请输入名称" size="small" style="width: 200px;" v-model="parameter.name"></el-input>
          <el-button @click="getWorksList()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
        </el-form-item>
        <div>
          <el-table :data="worksList" max-height="550px" size="small" style="width: 100%">
            <el-table-column label="" prop="suggest_id" width="50px" v-if="visible">
              <template slot-scope="scope">
                <el-checkbox @change="handleCheckedCitiesChange($event, scope.row.collection_id)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="ID" prop="collection_id"></el-table-column>
            <el-table-column label="作品名" prop="name"></el-table-column>
            <el-table-column label="图片" prop="thumbnail">
              <template slot-scope="scope">
                <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.thumbnail"
                  :preview-src-list="toArray(scope.row.thumbnail)">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="发布人" prop="user_id">
              <template slot-scope="scope">
                <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author_info" v-if="scope.row.user_id" :modalShow="false"></UserInfo>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" style="margin-left: 40%;margin-top: 50px;">
          <el-pagination layout="prev, pager, next" :total="totals" @size-change="sizeChange" @prev-click="prevClick"
            @next-click="nextClick" @current-change="currentChange">
          </el-pagination>
        </div>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeBox">取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <el-card body-style="padding:10px" class="box-card">
      <el-select placeholder="选择类型" v-model="query.type">
        <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
      </el-select>
      <el-button @click="page=1;init()" size="small" style="padding: 10px 20px;margin-left: 20px;" type="primary">搜索</el-button>
      <el-button @click="toForm()" size="mini" type="success" style="padding: 10px 20px"
        v-permission="['ADMIN', 'RECOMMEND_ADD']">添加</el-button>
      <el-button size="mini" type="success" style="padding: 10px 20px" @click="checkboxShow = !checkboxShow"
        v-permission="['ADMIN', 'RECOMMEND_CHECKBOX']">多选</el-button>
      <el-popconfirm @confirm="delPL()" title="这是一段内容确定删除吗？">
        <el-button size="mini" slot="reference" type="danger" style="padding: 10px"
          v-permission="['ADMIN', 'RECOMMEND_BATCH_DELETE']">批量删除</el-button>
      </el-popconfirm>
    </el-card>

    <el-card body-style="padding:10px" class="box-card mt-10">
      <el-table :data="data" max-height="550px" size="small" style="width: 100%">

        <el-table-column v-if="checkboxShow" label="" prop="suggest_id" width="50px">
          <template slot-scope="scope">
            <el-checkbox @change="changeFun($event, scope.row.suggest_id)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="suggest_id"></el-table-column>
        <el-table-column label="长视频合集id" prop="collection_id"></el-table-column>


        <el-table-column label="类型" prop="suggest_id">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 'hot'" type="warning">正在热播</el-tag>
            <el-tag v-else-if="scope.row.type == 'latest'" type="success">最新推荐</el-tag>
            <el-tag v-else type="danger"></el-tag>
          </template>
        </el-table-column>

        <el-table-column label="合集名" prop="collection_info">
          <template slot-scope="scope">
            <div v-if="scope.row.collection_info">{{ scope.row.collection_info.name }}</div>
          </template>
        </el-table-column>

        <el-table-column label="图片" prop="collection_info">
          <template slot-scope="scope">
            <el-image v-if="scope.row.collection_info" class="border" style="width: 50px; height: 50px"
              :src="scope.row.collection_info.thumbnail" :preview-src-list="toArray(scope.row.collection_info.thumbnail)">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="添加时间" prop="created_at"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="toForm(scope.row, 1)" size="mini" type="primary" style="padding: 10px"
              v-permission="['ADMIN', 'LABELS_UPDATE']">修改</el-button> -->
            <el-popconfirm @confirm="del(scope.row.suggest_id)" title="这是一段内容确定删除吗？">
              <el-button size="mini" slot="reference" type="danger" style="padding: 10px"
                v-permission="['ADMIN', 'RECOMMEND_DELETE']">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页组件 -->
    <el-card body-style="padding:10px" class="box-card mt-10">
      <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
        layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
    </el-card>
  </div>
</template>
    
<script>
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
  name:"long-video/recommend",
  mixins: [initData],
  components: {
    medium
  },
  data() {
    return {
      query: {
        type: ""
      },
      form: {
        collection_ids: [], //合集ID
        type: '',//'hot','latest' 正在热播 最新推荐
      },
      visible: false,
      loading: false,
      type: 'create',
      checkboxShow: false,
      typeList: [
        {
          name: '正在热播',
          value: 'hot',
        },
        {
          name: '最新推荐',
          value: 'latest',
        }
      ],
      worksList: [],
      worksClassList: [],
      totals: 0,
      parameter: {
        page: 1,
        size: 10,
        name: ""
      },
      suggest_id: []
    }
  },
  mounted() {
    this.beforeInit()
    this.form.collection_ids = this.$route.query.id
    this.getWorksList()
    this.getworksClassList()
  },
  methods: {
    toArray(str) {
      const arr = []
      arr.push(str)
      return arr
    },

    changeFun(select, val) {
      console.log(select, val)
      if (select) {
        this.suggest_id.push(val)
        console.log(this.suggest_id)
        return
      }

      let index = this.suggest_id.indexOf(val);
      if (index > -1) {
        this.suggest_id.splice(index, 1);
      }
      console.log(this.suggest_id)
    },

    selectClass(val) {
      console.log(val)
      this.parameter.page = 1
      this.getWorksList(val)
    },


    beforeInit() {
      this.url = '/creation-collection/suggest/index'
      this.init() //重新请求数据
    },


    sizeChange(val) {
      console.log(val)
    },

    currentChange(val) {
      console.log(val)
      this.parameter.page = val
      this.getWorksList()
    },
    prevClick(val) {
      console.log(val)
    },

    nextClick(val) {
      console.log(val)
    },


    handleCheckedCitiesChange(event, collection_id) {
      console.log("value", event, collection_id)
      if (event) {
        this.form.collection_ids.push(collection_id)
        console.log(this.form.collection_ids)
        return
      }
      let index = this.form.collection_ids.indexOf(collection_id);
      if (index > -1) {
        this.form.collection_ids.splice(index, 1);
      }
      console.log(this.form.collection_ids)
    },

    getWorksList(id) {
      if (id) {
        this.parameter.category_id = [id]
      }
      this.$request.get('/creation-collection/index', this.parameter).then((res) => {
        this.totals = res.page.total
        this.worksList = res.items
      })
    },

    getworksClassList() {
      let that = this
      this.$request.get('/creation-category/index').then((res) => {
        this.worksClassList = res
        console.log(this.data, 111)
        // this.init()
      })
    },


    del(id) {
      this.$request.del('/creation-collection/suggest/delete/' + id).then((res) => {
        this.$message.success('删除成功')
        this.init() //重新请求数据

      })
    },

    delPL(id) {
      if (this.suggest_id.length == 0) {
        this.$message({
          message: '请勾选需要删除的内容！',
          type: 'warning'
        });
        return
      }
      this.$request.del('/creation-collection/delete_batch', {
        suggest_ids: this.suggest_id
      }).then((res) => {
        this.$message.success('删除成功')
        this.checkboxShow = false
        this.init() //重新请求数据
      })
    },

    toForm(form, type) {
      this.visible = true //打开弹出框
      if (type == 1) {
        this.type = 'update'
        this.form = form
      } else {
        this.type = 'create'
        this.form = {
          collection_ids: [], //合集ID
          type: '',
        }
      }
    },

    closeBox() {
      this.type = 'create'
      this.visible = false
      this.form = {
        collection_ids: [], //合集ID
        type: '',
      }
    },


    //提交
    submit() {
      if (!(this.form.type && this.form.collection_ids.length > 0)) {
        this.$message({
          message: '请将信息填写完整！',
          type: 'warning'
        });
        return
      }
      if (this.type == 'create') {
        this.$request.post('/creation-collection/create_batch', this.form).then((res) => {
          this.$message({
            message: '添加成功',
            type: 'success'
          });

          this.init() //重新请求数据
          this.closeBox()

        })
      } else {
        this.$request.put('/creation-collection/suggest/update/' + this.form.suggest_id, this.form).then((res) => {
          console.log(res)
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.init() //重新请求数据
          this.closeBox()
        })
      }
    },
  },
}
</script>
    
<style lang="scss" scoped>
.butBox {
  background-color: rgb(219, 219, 219);
  border: none;
  color: #555;
}
</style>